<template>
    <!--资源列表 --- 表格 -->
    <div class="table_box">
        <el-table :data="list" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <!-- 这个时候 label是表头的标题，prop是存进去数据的对应英文 -->
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="资源名称" />
            <el-table-column prop="url" label="资源路径" />
            <el-table-column prop="description" label="描述" />
            <!--时间需要进行格式化，我们可以使用方法一：  element-plus 里面的 Table表格里面的 formatter 属性用来格式化内容，方法二：npm 里面可以找第三方插件 moment 和 dayjs来实现，方法三自己 utils 文件夹 index.ts 里面封装一个格式化数据的方法   -->
            <!-- 使用方法三自己定义方法,去到 utils 文件夹 index.ts -->
            <el-table-column prop="createTime" label="添加时间">
                <template #default="{ row }">
                    <!-- 使用格式化时间方法 -->
                    {{ formateTime(row.createTime) }}
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
        :total="total"/>
</template>
<script setup lang='ts'>
import { MoHuChaXunApi } from '@/http/ums/api'
import { formateTime } from '@/utils/index'
// 26.6导入分页组件
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'

import useTable from '@/hooks/useTable'

import { reactive } from 'vue'
// 定义 tableData 的数据，使用 ref 去存响应式数据
// const tableData = ref<[]>([])


// 定义传进去的参数数据
const queryParams = reactive({})
// 定义总条数的响应式数据
// const total = ref(0)

const { list, pageNum, pageSize, total } = useTable(MoHuChaXunApi, queryParams)

console.log(list.value);



// MoHuChaXunApi(queryParams).then(res => {
//     console.log(123, res);

//     if (res.code === 200) {
//         tableData.value = res.data
//         console.log(tableData.value);
//     }
// })


</script> 
<style lang="less" scoped></style>